<template>
  <div class="area-box">
    <div class="left-line" :class="{'isVisible' : !visible.Left.includes(itemData.horizontal) }">
      <span class="top" :class="{'no-line' : !visible.Top.includes(itemData.vertical) }"></span>
      <span class="bottom" :class="{'no-line' : !visible.Bottom.includes(itemData.vertical) }"></span>
    </div>
    <div class="round" :class="{active: itemData.active }">
      <div class="image" :style="{'backgroundImage': `url(${itemData.avatarUrl})` }"></div>
      <p class="tip">
        <span class="nowrap">{{ itemData.agentName }}</span>
        <span v-if="itemData.children.length">{{ `(${itemData.children.length || 0 }人)` }}</span>
      </p>
    </div>
    <div
      class="right-line"
      :class="{'isVisible' : !visible.Right.includes(itemData.horizontal), 'visible-line' : itemData.isMoveLine }"
    >
      <span class="top" :class="{'no-line' : !visible.Top.includes(itemData.vertical) }"></span>
      <span class="bottom" :class="{'no-line' : !visible.Bottom.includes(itemData.vertical) }"></span>
    </div>
  </div>
</template>
<script>
const Top = ['T', 'TB']
const Bottom = ['B', 'TB']
const Left = ['L', 'LR']
const Right = ['R', 'LR']
export default {
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    visible: {
      Top,
      Bottom,
      Left,
      Right
    }
  }),
  computed: {},
  created() {}
}
</script>
<style lang="less" scoped>
@color-blue: #007ae6;
@color-red: #eb5d2a;

.area-box {
  width: 108px;
  height: 86px;
  display: flex;
  position: relative;
  .left-line,
  .right-line {
    flex: 1;
    span {
      display: block;
      width: 100%;
      height: 50%;
      &.top {
        border-bottom: 1px solid @color-blue;
      }
      &.bottom {
        border-top: 1px solid @color-blue;
      }
    }
    .no-line {
      border: 0px;
    }
    &.isVisible {
      visibility: hidden;
    }
    &.visible-line {
      visibility: visible;
    }
  }
  .left-line span {
    border-left: 2px solid @color-blue;
  }
  .right-line span {
    border-right: 2px solid @color-blue;
  }
  .visible-line span {
    border: 0;
  }

  .round {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    align-self: center;
    border: 3px solid @color-blue;
    .image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    .tip {
      white-space: nowrap;
      font-size: 12px;
      color: #333;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
    }
    .nowrap {
      max-width: 48px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
  }
  .active {
    border: 3px solid @color-red;
    .tip {
      color: @color-red;
    }
  }
}
</style>
